<template>
  <div id="message">
    <van-list v-model="loading" :finished="finished"  :immediate-check="firstcheck" :offset="offset" @load="onLoad"> 
        <div class="card" v-for="(item,index) in listdata" :key="index">
            <van-swipe-cell :right-width="80" :left-width="0">
                <div class="left-img">
                    <img src="http://img.xianyufanshen.net//my/xitongtongzhi@2x.png" alt="" class="img-left">
                </div>
                <div class="left-text">
                    <p v-show="lang=='zh'" class="font-12 message-title">系统通知</p>
                    <p v-show="lang=='en'" class="font-12 message-title">System Information</p> 
                    <p class="font-10 message-date">{{item.create_time}}</p>
                    <p v-show="lang=='zh'" class="font-12 message-content">通知内容：{{item.content}}</p>
                    <p v-show="lang=='en'" class="font-12 message-content">Content：{{item.content}}</p>
                </div>
                <span v-show="lang=='zh'"  slot="right" class="del" @click="gotodel(item.id)">删除</span>
                <span v-show="lang=='en'" slot="right" class="del" @click="gotodel(item.id)">delete</span>
            </van-swipe-cell>
        </div>
    </van-list>
    <div v-show="lang=='zh'" class="nolist" v-if="finished && dataLength !=0">没有更多数据</div>
    <div v-show="lang=='en'" class="nolist" v-if="finished && dataLength !=0">no more data</div>
    <div class="nolist" v-show="lang=='zh'"  v-if="dataLength==0">暂无消息</div>
    <div class="nolist" v-show="lang=='en'"  v-if="dataLength==0">no message in list</div>
  </div>
</template>

<script>
import { Loading,Toast,List,SwipeCell,Dialog} from 'vant';
import { getMessageList ,postDelmessage} from '@/api/public' ;
export default {
    name: 'message',
    //声明组件
    components:{
        [Loading.name]:Loading,
        [Toast.name]:Toast,
        [List.name]:List,
        [SwipeCell.name]:SwipeCell,
        [Dialog.name]:Dialog,

    },
    data (){
        return{
            userId:0, //用户ID
            listdata:[],//获取数据
			pageIndex:1,//当前页码
			pageSize:10,//页面条数
			loading: false,//加载中
      		finished: false,//加载完成
      		firstcheck:false,//进页面检查load
            offset:50,//与底部距离多少触发load
            dataLength:0,//数据listData长度
        }
    },
    //实例创建完成后被立即调用
    created (){
        //获取用户ID
        this.getUserId();
        this.getLang();
        //获取列表
        this.getmessagelist();
    },
    //
    methods:{
        //上拉加载
        onLoad() {
            this.pageIndex++;
        	this.getmessagelist();
        },
    	//获取用户ID
    	getUserId(){
    		if(this.$route.query.userId && this.$route.query.userId > 0){
    			this.userId = this.$route.query.userId;
    		}else{
    			//跳转登录
    			let para = {};
				para.linkType = "login";
				this.interaction.hLinkToApp(para);	
    		}
        },
        //获取语言环境
    	getLang(){
            if(this.$route.query.lang){
    			this.lang = this.$route.query.lang;
    		}
        },
    	//获取通知列表
        getmessagelist(){
        	let that = this;
            getMessageList(that.pageIndex,that.pageSize,that.lang).then(res=>{
            	if(res.code==200){
					if(res.data.total > 0){
						var list = res.data.list;
						that.listdata = that.listdata.concat(list);
						that.loading = false;
					}else{
						that.finished = true;
						that.loading = false;
					}
                    if(this.pageIndex == 1 && res.data.total < this.pageSize){
						this.finished = true;
                        this.loading = false;
                    }else if(this.total == this.listdata.length){
                        this.finished = true;
                        this.loading = false;
                    }
                     that.dataLength = that.listdata.length;  
                }else{
                    Toast(res.msg)
                }
            })
        },
        //删除消息
        gotodel(id){
            var title='';
            var content='';
            var confirm = '确认';
            var cancel = '删除';
            if(this.lang =='zh'){
                title = '删除该藏品';
                content= '是否永久删除该藏品？'
            }else {
                title = 'Delete the collection';
                content= 'Permanently delete the collection?'
                confirm = 'confirm';
                cancel = 'cancel'
            }
            Dialog.confirm({
                title: title,
                message: content,
                confirmButtonText:confirm,
                cancelButtonText:cancel
            }).then(() => {
            // on confirm
                postDelmessage(id,this.lang).then(res=>{
				    if(res.code==200){
                        this.listdata = [];
                        this.getmessagelist();
                    }else{
                        Toast(res.msg)
                    }
                });
            }).catch(() => {
            // on cancel
            });
        },
    }
}
</script>
<style lang="stylus" scoped>
 html{
    background: #f1f1f1;
}
.loading-box{
    width :50px;
    height :50px;
    border-radius :3px;
    background :rgba(0,0,0,.5);
    position :fixed;
    left :50%;
    top:50%;
    margin-left:-25px;
    margin-top :-25px;
    z-index :999999;
    text-align :center;
    vertical-align :middle;
    .van-loading{
       left :50%;
       top:50%;
       margin-left :-15px;
       margin-top :-15px;
    }
}
.card{
    border-bottom:1px solid #f1f1f1;
    background: #fff;
    padding: .3125rem .46875rem;
    overflow: hidden;
    position :relative;
}
.left-img{
    float:left;
    width: 1.1875rem;
}
.img-left{
    display: block;
    width: .9375rem;
    height: .9375rem;
}
.left-text{
    width: 7.3rem;
    float: left;
}
.font-12{
    font-size: .375rem;
}
.font-10{
    font-size: .3125rem;
}
.message-title{
    color:#494949;
}
.message-date{
    color:#a2a2a2;
    margin-top: .125rem;
}
.message-content{
    line-height :.48rem;
    color:#494949;
    margin-top: .3125rem;
}
.nolist{
		font-size: 0.32rem;
		color: #A2A2A2;
		text-align: center;
		padding: 0.533333rem 0;
	}
    .del{
        display :inline-block;
        position: absolute;
        top: 50%;
        left:.266667rem
        margin-top: .533333rem;
        width :1.733333rem;
        height :1.066667rem;
        line-height :1.066667rem;
        text-align :center;
        font-size :.4rem;
        color :#fff;
        background-color :red;
    }
</style>
